<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网站标题</title>
	<!-- <link href="lib/lib/css/bootstrap.min.css" rel="stylesheet"> -->
	 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
	 <link rel="ahortcut icon" href="images/taobao.ico" type="images/x-icon">

<style type="text/css">

	div{
		/*background-color: pink;*/
	}

	@media screen and(max-width: 768px) {/*超小屏幕*/
		.container{
			width: 100%;
		},
		div{color:red;background-color: red;}
	}


	@media screen and(max-width: 768px) and(max-width: 992px) {/*屏幕*/
		.container{
			width: 750px;
		},
		div{  color:yellow;  background-color: yellow;}
	}

	@media screen and(max-width: 992px) and(max-width: 1200px) {/*屏幕*/
		.container{
			width: 970px;
		},
		div{  color:blue;background-color: blue; }
	}

	@media screen and(min-width: 1200px) {/*屏幕*/
		.container{
			width: 1170px;
		},
		div{  color:green; background-color: green;}
	}

	
	

</style>
</head>
<body>
<br><br><br><br>


<div class="container">运用媒体查询自适配窗口大小</div>















<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>